<html>
<head>
<title>openHAB</title>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover">
<meta name="theme-color" content="#e64a19">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="res/icons/apple-touch-icon.png">
<link rel="icon" href="res/icons/favicon.png">
<link rel="manifest" href="/manifest.json">
<style>
body {
	text-align: center;
	font-family: -apple-system, system-ui, -apple-system, "Segoe UI", Roboto,
		Ubuntu, Cantarell, "Noto Sans", sans-serif, Helvetica, Arial,
		sans-serif;
}
	
@media (prefers-color-scheme: dark) {
	body, input.field {
		background-color: rgb(18, 18, 18);
		color: white;
	}
	
	input.field {
		border-bottom: 1px solid #333 !important;
	}
}

.logo {
	margin-top: 3rem;
	margin-bottom: 2rem;
	width: 240px;
}

.message {
	font-size: 11pt;
	margin-bottom: 2rem;
}

form.hide {
	display: none;
}

form.show {
	display: initial;
}

input {
	border: 0;
	padding: 10px;
	outline: none;
}

input.field {
	width: 300px;
	border-bottom: 1px solid #aaa;
	margin-bottom: 1rem;
}

.submit {
	cursor: pointer;
	margin-top: 2rem;
	background-color: rgb(33, 150, 243);
	text-decoration: none;
	color: white;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	min-width: 80px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 1rem;
	padding-right: 1rem;
}

input.submit:hover {
	background-color: rgb(72, 168, 245);
}

.result {
	display: none;
}

.resultPassword {
	display: initial;
}

.resultToken {
	display: initial;
}
</style>
</head>
<body>
	<img class="logo"
		src="" />
	<div class="message">{message}</div>
	<form class="{formClass}" method="POST" action="{formAction}">
		{form_fields}
		<div>
			<input class="field" autocomplete="off" type="text" placeholder="{usernamePlaceholder}" name="username" required autofocus />
		</div>
		<div>
			<input class="field" type="password" placeholder="{passwordPlaceholder}" name="password" required />
		</div>
		<div>
			<input class="field" type="{newPasswordFieldType}" placeholder="{newPasswordPlaceholder}" name="new_password" />
		</div>
		<div>
			<input class="field" type="{repeatPasswordFieldType}" placeholder="{repeatPasswordPlaceholder}" name="password_repeat" />
		</div>
		<div>
			<input class="field" type="{tokenNameFieldType}" placeholder="{tokenNamePlaceholder}" name="token_name" />
		</div>
		<div>
			<input class="field" type="{tokenScopeFieldType}" placeholder="{tokenScopePlaceholder}" name="token_scope" />
		</div>
		<div>
			<input class="submit" type="Submit" value="{buttonLabel}" />
		</div>
	</form>
	<div class="result{resultClass}">
		<a class="submit" type="button" href="/">{returnButtonLabel}</a>
	</div>
</body>
</html>
